<template>
    <div class="memberinfo-layout">
        <div class="info-back">
            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="back-icon" @click="back()">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </div>
                </el-col>
                <el-col :span="4" class="btns">
                    <!--<el-button type="primary"  class="save red-btn" @click="submitForm('ruleFormUser')">保存</el-button>-->
                    <el-button type="primary" class="save red-btn" @click="onSubmit">保存</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="member-info-title">
            <el-form :model="addForm" ref="addForm" label-width="100px" class="member-info-form">
                <el-form-item label="父栏目名称:" prop="parentName">
                    <el-input v-model="addForm.parentName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="栏目名称:" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="类型:">
                    <el-select v-model="value1">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否主页展示:">
                    <el-select v-model="value2">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:" prop="remark" class="member-mark">
                    <el-input type="textarea" v-model="addForm.remark"></el-input>
                </el-form-item>
                <el-form-item label="上传图片:" class="member-upload">
                    <div class="el-left">
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :on-error="onError">

                            <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="uploadUrl">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
    import * as types from '../../../store/types';
    export default {
        name: 'keepalive-false',
        data: function () {
            return {
                options1: [{
                    value: 'media',
                    label: '画廊'
                }, {
                    value: 'list',
                    label: '列表'
                }],
                value1: 'media',
                options2: [{
                    value: '0',
                    label: '否'
                }, {
                    value: '1',
                    label: '是'
                }],
                value2: '0',
                addForm: {
                    parentId: '',
                    parentName: '',
                    name: '',
                    viewType: '',
                    isFirst: '',
                    remark: ''

                },
                imageUrl: '',
                uploadUrl: this.$cfg.api_url + "/vue-uploads",
            }
        },
        watch: {
            getCategoryId(){
            }
        },
        computed: {
            getCategoryId: function () {
                this.addForm.parentId = this.$store.state.categoryID.id;
                this.addForm.parentName = this.$store.state.categoryID.name;
            }
        },
        mounted(){
            if (this.$route.query.new) {
                console.log(this.$store.state.categoryID)
                this.addForm.id = this.$store.state.categoryID.id;
                this.addForm.parentId = this.$store.state.categoryID.parentId;
                this.addForm.parentName = this.$store.state.categoryID.parentName;
                this.addForm.name = this.$store.state.categoryID.name;
                this.addForm.remark = this.$store.state.categoryID.remark;
                this.imageUrl = this.$cfg.api_url + this.$store.state.categoryID.portraitName;
                this.addForm.ver = this.$store.state.categoryID.ver;
                this.value1 = this.$store.state.categoryID.viewType;
                this.value2 = this.$store.state.categoryID.isFirst + '';
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                let self = this;
                this.imageUrl = URL.createObjectURL(file.raw);
                if (res) {
                    self.addForm.portraitId = res[0].id;
                }

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            onError: function (err, file, fileList) {
                alert(err)
            },
            back: function () {
                console.log("========>back");
                this.$router.go(-1);
            },
            onSubmit(){
//                http://192.168.1.136:8081/shop/category/
                let self = this;
                let args = this.addForm;
                args.viewType = this.value1;
                args.isFirst = this.value2;
                console.log("新增啊啊啊啊啊啊啊啊啊啊")
                console.log(args)
                this.$axioxs.post("/category/", args)
                    .then(function (res) {
                            self.$store.commit(types.CATEGORY_ADD, args);
                            self.$router.push('/mainColumn')
                        }
                        ,
                        (res) => {
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: res
                            });
                        })
            }
        }

    }
</script>
<style scoped>
    .memberinfo-tit {
        box-shadow: none !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .member-info-form {
        width: 90%;
        padding-top: 0px;
        margin: 0 auto;
    }

    .member-info-title {
        padding-top: 10px;
    }
</style>